<template>
  <div class="box">
    <div class="box-top">
      <div class="top-title">
        <span>{{title}}</span>
        <img src="images/wuli/标题底.png">
      </div>
      <div class="top-right" v-show="this.location!='宁波市'">
        <div class="local" ref="local" @click="isLocal(2)">全部</div>
        <img src="images/wuli/本地外地分割线.png">
        <div class="out-local" ref="out-local" @click="isLocal(0)">宁波市外</div>
      </div>
    </div>
    <div class="basic-box">
      <div v-if="this.total==0" class="no_data">
        暂无数据
      </div>
      <basic1 
        v-else
        v-for="(item,index) in data_current"
        :key="index"
        :item="item"
        @checked="getNo(item)"
        :class="{'click-style': item.company_code==$store.state.gs_id}"
        :index="[current_page,index]"
      ></basic1>
      <!-- :class="{'click-style': outside && checked == item.no}" -->
      
    </div>
    <div class="box-bottom">
      <img src="images/wuli/标注@2x.png" class="important">
      <el-pagination
        small
        background
        :pager-count="5"
        layout="prev, pager, next"
        :page-size="9"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import basic1 from './basic1.vue'

export default {
  name: '',
  components: {
    basic1
  },
  props: {
    title: {
      type: String,
      required: true
    },
    index: {
      type: [String, Number],
      required: true
    },
    field: {
      type: String,
      required: true
    },
    location: {
      type: String,
      required: true
    },
    searchname: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      position: 'local',
      data: [],
      checked: 1,
      total: 0,
      data_current: [],
      is_local: 1,
      current_page: 1
    }
  },
  computed: {},
  watch: {
    field: function (){
      console.log('left的field更新为 ',this.field)
      this.getLeft(this.title,this.is_local)
    },
    location: function (){
      this.$refs['out-local'].style = 'cursor: pointer;'
      console.log('left的location更新为 ',this.location)
      // 若是全国 浙江
      if(this.location!='宁波市'){
        this.isLocal(0) // 跳到外地
      } else {
        this.isLocal(1) 
      }
    },
    searchname: function (){
      console.log('left的searchname更新为 ',this.searchname)
      this.getLeft(this.title,this.is_local)
    }
  },
  created () {},
  mounted () {
    this.getLeft(this.title,2)
  },
  methods: {
    isLocal(flag) {
      if(flag==1){
        this.is_local = 1
        // this.position = 'local'
        this.$refs['local'].style = 'color: #00D8FF;' // 变亮
        this.$refs['out-local'].style = 'color: #859BBC;' // 暗
      } else if(flag==0) {
        this.is_local = 0
        // this.position = 'out-local'
        this.$refs['out-local'].style = 'color: #00D8FF;'
        this.$refs['local'].style = 'color: #859BBC;' // 暗
      } else {
        // 全部  flag==2为不做宁波的筛选
        this.is_local = 2
        this.$refs['local'].style = 'color: #00D8FF;' // 变亮
        this.$refs['out-local'].style = 'color: #859BBC;' // 暗
      }
      // console.log(this.is_local)
      this.getLeft(this.title,this.is_local)
    },
    getNo(item){
      console.log(item)
      this.checked = item.company_code
      // this.$store.commit('setId',item.company_code)
      try {
        this.$store.dispatch('setId',item.company_code)
      } catch (error) { 
        console.log('error: ',error)
      }

    },
    async getLeft(company_type,is_local){
      const url = '/dcockpit/rest/cockpitApi/searchListNormResult'

      let x
      // 2 为不做宁波的筛选
      if(is_local==2){
        if(this.location=='浙江省'){
          x = await this.$api.post(url,{
            "normGuid": "4466b298-276c-41c6-9a95-9eec1f654eda",
            "fieldList": [{"key":"company_type","value":company_type},{"key":"province_code","value":"330000"},{"key":"mapping_name","value":this.field}]
          })
        }else if(this.location=='宁波市' || is_local==1){
          x = await this.$api.post(url,{
            "normGuid": "4466b298-276c-41c6-9a95-9eec1f654eda",
            "fieldList": [{"key":"company_type","value":company_type},{"key":"mapping_name","value":this.field},{"key":"city_code","value":"330200"}]
          })
        }else{
          // 全国
          x = await this.$api.post(url,{
            "normGuid": "4466b298-276c-41c6-9a95-9eec1f654eda",
            "fieldList": [{"key":"company_type","value":company_type},{"key":"mapping_name","value":this.field}]
          })
        }
      }else{
        if(this.location=='浙江省'){
          x = await this.$api.post(url,{
            "normGuid": "4466b298-276c-41c6-9a95-9eec1f654eda",
            "fieldList": [{"key":"company_type","value":company_type},{"key":"province_code","value":"330000"},{"key":"mapping_name","value":this.field},{"key":"is_local","value":is_local.toString()}]
          })
        }else if(this.location=='宁波市' || is_local==1){
          x = await this.$api.post(url,{
            "normGuid": "4466b298-276c-41c6-9a95-9eec1f654eda",
            "fieldList": [{"key":"company_type","value":company_type},{"key":"mapping_name","value":this.field},{"key":"city_code","value":"330200"}]
          })
        }else{
          // 全国
          x = await this.$api.post(url,{
            "normGuid": "4466b298-276c-41c6-9a95-9eec1f654eda",
            "fieldList": [{"key":"company_type","value":company_type},{"key":"is_local","value":is_local.toString()},{"key":"mapping_name","value":this.field}]
          })
        }
      }

      if(x.status.code!='1'){
        print('左侧 '+this.title+' 数据获取失败')
        return
      } 

      let {custom:{result}}={...x}
      // this.cockpitData=result.cockpitData
      this.data = result.cockpitData
      // console.log(this.data)
      this.total = x.custom.result.sumCount
      if(this.title=='头部企业' && this.data.length>0 ){

        // console.log('qq ',this.data[0])
        this.$store.dispatch('setId', this.data[0].company_code)
      }
      this.handleCurrentChange(1)

    },
    handleCurrentChange(n) {
      // let sum = Math.ceil(this.total/9)
      // console.log(`当前页: ${n}`);
      this.current_page = n
      this.data_current = this.data.slice(9*n-9,9*n)
      // console.log(sum,9*n-9,9*n-1)
    }
  }
}
</script>

<style scoped lang="stylus">
.box {
  width: 100%;
  height: 211px;
  margin-bottom: 20px;
  .box-top {
    display: flex;
    justify-content: space-between;
    align-item: center;
    box-sizing: border-box;
    height: 36px;
    width: 471px;
    border-bottom: 1px solid #00D8FF;
    padding-right: 4px;
    .top-title {
      position relative;
      width: 160px;
      font-size: 22px;
      font-weight: 500;
      color: #00D8FF;
      line-height: 36px;
      height: 36px;
      text-align: center;
      span {
        height: 36px;
        line-height: 36px;
        display: flex;
        justify-content: center;
        align-item: center;
      }
      img {
        position absolute;
        top:-1px;
        left: 0;
        z-index: 0;
      }
    }
    .top-right {
      color: #859BBC;
      width: 159px;
      height: 36px;
      line-height: 36px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      .local {
        color: #00D8FF;
      }
      img {
        width: 8px;
        height: 19px;
        cursor: default;
        padding-top: 8.5px;
      }
    }
  }
  .basic-box {
    display flex;
    height: 153px;
    box-sizing: border-box;
    flex-wrap: wrap;
    // justify-content space-between;
    justify-content flex-start;
    align-content flex-start;

    padding: 12px 10px 6px 21px;
    overflow: hidden;
    background: rgba(3, 16, 38, 0.71);
  }
  .box-bottom {
    display flex;
    justify-content: space-between;
    height: 18px;
    padding: 0 17px 0 21px;
    background: rgba(3, 16, 38, 0.71);
    align-items: center;
    padding-bottom: 9px;
    .important{
      height: 12px;
    }
    .fanye {
      display: flex;
      align-items: center;
      .number-box {
        width: 18px;
        height: 18px;
        margin-left: 5px;
        font-size: 9px;
        text-align: center;
        line-height: 18px;

      }
    }
  }
}
.click-style_local {
  color: #00D8FF;
}
.click-style {
  background-image: url('/images/wuli/企业-on@2x.png');
  background-size: 100%;
}
>>> .el-pagination {
  height: 18px;
  padding: 0;
  .btn-prev,.btn-next {
    min-width: 18px !important;
    height: 18px;
    border-radius: 3px;
    border: 1px solid #99C8FF;
    background-color: rgba(3, 16, 38, 0.71);
    color #99C8FF;
    .el-icon {
      line-height: 13px;
      height: 13px;
      font-size: 6px;
    }
  }
   .el-pager {
    min-width: 18px;
    li {
      padding: 0 3px;
    }
    .more::before {
      line-height: 13px !important;
    }
    .number, .more, .el-icon-more{
      height: 18px !important;
      line-height: 16px !important;
      font-size: 9px;
      min-width: 18px !important;
      font-weight: 500;
      color: #A5C7E7;
      background-color: rgba(3, 16, 38, 0.71);
      border: 1px solid #A5C7E7;
    }
    .active {
      background: rgba(30, 158, 255, 1);
    }
  }
}
.no_data {
  color: #fff;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 135px;
  letter-spacing: 4px;
  opacity: 0.8;
}
</style>
